<template>
  <gd-input
		v-model="curBindVal"
		v-bind="allCompAttrs"
		v-on="allBindEvents"
	>
	<template #prefix="slotProps" v-if="allCompAttrs['prefix-slot-config'] && allCompAttrs['prefix-slot-config'].hasOwnProperty('contentType') && allCompAttrs['prefix-slot-config'].hasOwnProperty('value')"><template v-if="allCompAttrs['prefix-slot-config'].contentType==='Text'"><view v-on="getBindSlotEvents('prefix-slot-config')" :style="allCompAttrs['prefix-slot-config']?.style ?? {}">{{allCompAttrs['prefix-slot-config'].value}}</view></template>
        <template v-else-if="allCompAttrs['prefix-slot-config'].contentType==='CustomizeComp'">
          <gd-enhance-hack-dynmic-comp 
            :component-file-path="allCompAttrs['prefix-slot-config'].value.componentFilePath"
            :root-path-type="'customize'"
            :component-props="{ ...props, curBindVal,slotProps }"
            v-bind="$attrs"
            v-on="getBindSlotEvents('prefix-slot-config')"
          >
          </gd-enhance-hack-dynmic-comp>
        </template>
        <template v-else-if="allCompAttrs['prefix-slot-config'].contentType==='Icon'">
          <gd-icon :icon-name="allCompAttrs['prefix-slot-config'].value" v-bind="{...$attrs,...(allCompAttrs['prefix-slot-config']?.componentAttr ?? {})}"></gd-icon>
        </template></template>
	<template #append="slotProps" v-if="allCompAttrs['append-slot-config'] && allCompAttrs['append-slot-config'].hasOwnProperty('contentType') && allCompAttrs['append-slot-config'].hasOwnProperty('value')"><template v-if="allCompAttrs['append-slot-config'].contentType==='Text'"><view v-on="getBindSlotEvents('append-slot-config')" :style="allCompAttrs['append-slot-config']?.style ?? {}">{{allCompAttrs['append-slot-config'].value}}</view></template>
        <template v-else-if="allCompAttrs['append-slot-config'].contentType==='CustomizeComp'">
          <gd-enhance-hack-dynmic-comp 
            :component-file-path="allCompAttrs['append-slot-config'].value.componentFilePath"
            :root-path-type="'customize'"
            :component-props="{ ...props, curBindVal,slotProps }"
            v-bind="$attrs"
            v-on="getBindSlotEvents('append-slot-config')"
          >
          </gd-enhance-hack-dynmic-comp>
        </template>
        <template v-else-if="allCompAttrs['append-slot-config'].contentType==='Icon'">
          <gd-icon :icon-name="allCompAttrs['append-slot-config'].value" v-bind="{...$attrs,...(allCompAttrs['append-slot-config']?.componentAttr ?? {})}"></gd-icon>
        </template></template>
	<template v-for="(slotVal, slotName, index) in $slots" :key="slotName" #[slotName]>
		<slot :name="slotName" v-if="!allCompAttrs[getSlotMetaKeyBySlotName(slotName)]"></slot>
	</template>
</gd-input>
</template>
<script>
export default {
  inheritAttrs: false,
  name: "DismensionGdInput"
};
</script>
<script setup>
import { computed,ref } from "vue";

import useComponentAttrs, {
  embeddedAtomicCompProps,
} from "../../useComponentAttrs";
import useComponentEvents from "../../useComponentEvents";

const props = defineProps({
  ...embeddedAtomicCompProps,
});



//组件所有属性的默认值映射
const compAttrsKeyDefaultValueMapping = {
    "style": {},
    "type": "text",
    "placeholder": "",
    "size": "default",
    "autosize": false,
    "maxlength": undefined,
    "rows": undefined,
    "readonly": false,
    "disabled": false,
    "showWordLimit": false,
    "clearable": false,
    "showPassword": false,
    "prefixSlotConfig": {},
    "appendSlotConfig": {},

}

const { curBindVal, containerType, allCompAttrs } = useComponentAttrs({
  props,
  compAttrsKeyDefaultValueMapping,
});

const {allBindEvents,getBindSlotEvents} = useComponentEvents(props, curBindVal);

const allSlotUiConfigInPanel = [{"key":"prefixSlotConfig","slotConfig":{"slotName":"prefix"}},{"key":"appendSlotConfig","slotConfig":{"slotName":"append"}}];
const getSlotMetaKeyBySlotName = (slotName) => {
  const matchedUiConfig = allSlotUiConfigInPanel.find(
    (el) => el.slotConfig.slotName === slotName
  );
  if (matchedUiConfig) {
    return matchedUiConfig.key;
  } else {
    return "";
  }
};
</script>
